<template>
  <div class="service-cooperation-content">
    <content-title
      titleTop="Service Cooperation Process"
      title="服务合作流程"
    ></content-title>
    <div class="cooperation-content">
      <div class="step-box">
        <div class="border-icon border-icon-top-left"></div>
        <div class="border-icon border-icon-top-right"></div>
        <div class="border-icon border-icon-bottom-left"></div>
        <div class="border-icon border-icon-bottom-right"></div>
        <div class="step-item">
          <img src="@/assets/image/home-cooperation-1.png" class="step-bg" />
          <div class="step-item-box">
            <img
              src="@/assets/image/home-cooperation-1-icon.png"
              class="item-icon"
            />
            <div class="item-text">
              选择服<br />
              务类型
            </div>
          </div>
        </div>
        <div class="step-item">
          <img src="@/assets/image/home-cooperation-2.png" class="step-bg" />
          <div class="step-item-box">
            <img
              src="@/assets/image/home-cooperation-2-icon.png"
              class="item-icon-2"
            />
            <div class="item-text">
              购买<br />
              支付
            </div>
          </div>
        </div>
        <div class="step-item">
          <img src="@/assets/image/home-cooperation-3.png" class="step-bg" />
          <div class="step-item-box">
            <img
              src="@/assets/image/home-cooperation-3-icon.png"
              class="item-icon-3"
            />
            <div class="item-text">
              留下联<br />
              系方式
            </div>
          </div>
        </div>
        <div class="step-item">
          <img src="@/assets/image/home-cooperation-4.png" class="step-bg" />
          <div class="step-item-box">
            <img
              src="@/assets/image/home-cooperation-4-icon.png"
              class="item-icon-4"
            />
            <div class="item-text">
              联系您<br />
              确认合作
            </div>
          </div>
        </div>
        <div class="step-item">
          <img src="@/assets/image/home-cooperation-5.png" class="step-bg" />
          <div class="step-item-box">
            <img
              src="@/assets/image/home-cooperation-5-icon.png"
              class="item-icon-5"
            />
            <div class="item-text">
              签订<br />
              合同
            </div>
          </div>
        </div>
      </div>

      <div class="advertisement-box">
        <img
          src="@/assets/image/home-cooperation-advertisement.png"
          class="advertisement-icon"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import contentTitle from "../content-title/content-title.vue";
</script>
<style lang="less">
@import "@/style/var.less";
@import "./index.less";
</style>
